<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>WMS管理系统</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

  <link rel="stylesheet" href="${request.contextPath}/statics/css/font-awesome.min.css">
  <link rel="stylesheet" href="${request.contextPath}/statics/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="${request.contextPath}/statics/css/all-skins.min.css">
  <link rel="stylesheet" href="${request.contextPath}/statics/css/main.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <link rel="stylesheet" type="text/css" href="${request.contextPath}/statics/css/login/reset.css" />
    <link rel="stylesheet" type="text/css" href="${request.contextPath}/statics/css/login/scanboardLogin.css" />
    <link rel="stylesheet" type="text/css" href="${request.contextPath}/statics/css/login/animsition.css" />
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

</head>
<body>
<div class="wp animsition" id="rrapp">
    <div class="boardLogin">
        <a href="#" class="logo">
            <img src="../statics/images/login/loginLogo.png">
        </a>
        <form>
            <div class="inpGroup">
                <span class="loginIco1"></span>
                <input type="text" name="username" placeholder="请输入您的用户名" v-model="username">
            </div>
            <div class="prompt">
                <p class="error">用户名错误或不存在</p>
            </div>

            <div class="inpGroup">
                <span class="loginIco2"></span>
                <input type="password" name="password" v-model="password" placeholder="请输入您的密码">
            </div>
            <div class="prompt">
                <p class="success">输入正确</p>
            </div>
            <div class="inpGroup">
                <span class="loginIco3"></span>
                <input type="text" class="form-control" v-model="captcha" autocomplete="off" @keyup.enter="login" placeholder="验证码">
            </div>
            <div class="inpGroupCode">
                <img alt="如果看不清楚，请单击图片刷新！" class="pointer" :src="src" @click="refreshCode">
                &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" @click="refreshCode" style="color: #f6f6f6">点击刷新</a>
            </div>
            <div class="prompt">
                <p class="success">输入正确</p>
            </div>

            <!-- <button class="submit">登录</button> -->
            <button @click="login"  class="animsition-link submit">登录</button>
        </form>
    </div>
</div>
<div id="particles-js"></div>
</body>
<!-- /.login-box -->
<script src="${request.contextPath}/statics/libs/jquery.min.js"></script>
<script src="${request.contextPath}/statics/libs/vue.min.js"></script>
<script src="${request.contextPath}/statics/libs/bootstrap.min.js"></script>
<script src="${request.contextPath}/statics/libs/jquery.slimscroll.min.js"></script>
<script src="${request.contextPath}/statics/libs/fastclick.min.js"></script>
<script src="${request.contextPath}/statics/libs/app.js"></script>
<script type="text/javascript">
var vm = new Vue({
	el:'#rrapp',
	data:{
		username: 'airenadmin@163.com',
		password: 'airen123qazwsx',
		captcha: '',
		error: false,
		errorMsg: '',
		src: 'captcha.jpg'
	},
	beforeCreate: function(){
		if(self != top){
			top.location.href = self.location.href;
		}
	},
	methods: {
		refreshCode: function(){
			this.src = "captcha.jpg?t=" + $.now();
		},
		login: function (event) {
			var data = "username="+vm.username+"&password="+vm.password+"&captcha="+vm.captcha;
			$.ajax({
				type: "POST",
			    url: "sys/login",
			    data: data,
			    dataType: "json",
			    success: function(result){
					if(result.code == 0){//登录成功
						parent.location.href ='analysis.html';
					}else{
						vm.error = true;
						vm.errorMsg = result.msg;
						
						vm.refreshCode();
					}
				}
			});
		}
	}
});
</script>
<script type="text/javascript">
		//添加回车键作为登录按钮.
        $(document).keydown(function(e){
             if(e.keyCode == 13) {
            	 vm.login();
             }
         });
</script>

<script type="text/javascript" src="${request.contextPath}/statics/libs/login/jquery.animsition.js"></script>
<script src="${request.contextPath}/statics/libs/login//particles.min.js"></script>
<script src="${request.contextPath}/statics/libs/login/app.js"></script>
<script type="text/javascript">
    $(".animsition").animsition({
        inClass               :   'fade-in',
        outClass              :   'fade-out',
        inDuration            :    800,
        outDuration           :    1000,
        linkElement           :   '.animsition-link',

        loading               :    false,
        loadingParentElement  :   'body',
        loadingClass          :   'animsition-loading',
        unSupportCss          : [ 'animation-duration',
            '-webkit-animation-duration',
            '-o-animation-duration'
        ],


        overlay               :   false,

        overlayClass          :   'animsition-overlay-slide',
        overlayParentElement  :   'body'
    });
</script>


<style>
@media (max-width: 768px){
.login-box {
    margin-left: auto;
}
}
html{
    height: 100% !important;
}
body{
    height: 100% !important;
}
.pointer{
    opacity:0.4;
    width: 90%;
}
</style>
</html>
